import React, { useEffect, useState } from 'react';
import { useLocation } from 'react-router-dom';
import { randomString } from '../../utils';
import './index.less';
import hutao from '../../assets/imgs/hutao.png';

interface IMessageItemState {
    messageId: string;
    senderName: string;
    message: string;
    time: string;
}

interface IMessageDetailState {
    userId: string;
    avatar: string;
    senderName: string;
}

export default function MessageDetail() {
    const [messages, setMessages] = useState<IMessageItemState[]>([]);
    const {
        state: { userId, avatar, senderName },
    } = useLocation() as { state: IMessageDetailState };

    useEffect(() => {
        // TODO: 请求数据
        // 暂时先用假数据测试
        setMessages([
            {
                messageId: randomString(10),
                senderName: 'keqing',
                message: 'hello hutao',
                time: '21小时前',
            },
            {
                messageId: randomString(10),
                senderName: 'hutao',
                message: `${'你好啊'.padEnd(100, '我爱写代码')}`,
                time: '20小时前',
            },
        ]);
    }, []);

    return (
        <div>
            <div className="message-detail">
                <div className="chatbox-header">{senderName}</div>
                <div className="chatbox-body">
                    {messages.map((item) => {
                        return (
                            <div className="chatbox-message" key={item.messageId}>
                                {item.senderName === senderName ? (
                                    <>
                                        <div className="chatbox-message-avatar">
                                            <img src={avatar} alt="" />
                                        </div>
                                        <div className="chatbox-message-content">
                                            <p className="message">{item.message}</p>
                                        </div>
                                    </>
                                ) : (
                                    <>
                                        <div className="chatbox-message-content">
                                            <p className="message">{item.message}</p>
                                        </div>
                                        <div className="chatbox-message-avatar">
                                            <img src={hutao} alt="" />
                                        </div>
                                    </>
                                )}
                            </div>
                        );
                    })}
                </div>
                <div className="sendMessage">
                    <textarea name="sendMessage"></textarea>
                    <button>发送</button>
                </div>
            </div>
        </div>
    );
}
